<script setup lang="ts">
import { useToPage } from '@/common/use/common';
import { reactive, ref } from 'vue';
// typescript
const { redirectTo } = useToPage();
const payments = ref([
  {title: "微信", value: 0},
  {title: "支付宝", value: 1}
]);
const state = reactive({
  radio: payments.value[0].value
});

// 支付方式选择器
const onRadioChange = (ev: any) => {

}

// 提交订单
const onSubmitOrder = () => {
  redirectTo("/pages/operation-result/operation-result?status=success");
}
</script>

<!-- 订单详情 -->
<template>
  <view class="container">
    <view class="header">
      <view class="title-view">
        <view class="status">待付款</view>
        <view class="time">付款时间：00:22:22</view>
      </view>
    </view>
    <!-- 地址选择 -->
    <uni-section title="地址信息" type="line" class="address-view">
      <uni-list>
        <uni-list-item show-arrow>
          <template #body>
            <view class="item-view">
              <view>联&nbsp;&nbsp;系&nbsp;&nbsp;人：张三</view>
              <view>联系电话：18984316469</view>
              <view>详细地址：贵阳市南明区沙冲路插画小区7栋</view>
            </view>
          </template>
        </uni-list-item>
      </uni-list>
    </uni-section>
    <!-- 订单商品列表 -->
    <uni-section title="商品信息" type="line" class="order-list-view">
      <w-order-item easy></w-order-item>
    </uni-section>
    <!-- 金额信息 -->
    <uni-section class="amount-info" title="金额信息" type="line">
      <uni-list>
        <uni-list-item class="amount-item" title="订单金额" right-text="￥2000.00"></uni-list-item>
        <uni-list-item title="运费" right-text="￥0.00"></uni-list-item>
        <uni-list-item title="优惠券" right-text="-￥5.00" show-arrow></uni-list-item>
      </uni-list>
    </uni-section>
    <!-- 订单信息 -->
    <uni-section title="商品信息" type="line" class="order-list-view">
      <uni-list>
        <uni-list-item title="订单编号" right-text="1000000001"></uni-list-item>
        <uni-list-item title="下单时间" right-text="2022-01-01 12:00:00"></uni-list-item>
      </uni-list>
    </uni-section>
    <!-- 支付方式 -->
    <uni-section title="支付方式" type="line" class="payment-list">
      <radio-group @change="onRadioChange">
        <uni-list>
          <uni-list-item v-for="(item, index) in payments" :key="item.value">
            <template #body>
              <label class="radio-item">
                <view>
                  <radio :value="item.value.toString()" :checked="index === state.radio" />
                </view>
                <view>{{item.title}}</view>
              </label>
            </template>
          </uni-list-item>
        </uni-list>
			</radio-group>
    </uni-section>
    <!-- 提交栏 -->
    <view class="submit-view">
      <view class="amount">
        <view>合计：</view>
        <view class="order-amount">
          <text>￥</text>
          <text>3000.00</text>
        </view>
      </view>

      <view class="button-view">
        <button @click="onSubmitOrder" hover-class="hover-class-opacity">提交订单</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
$footer-height: 100rpx;
.container {

  padding-bottom: calc($footer-height + 20rpx);

  :deep(.uni-section-header) {
    .line {
      background-color: $primary-color;
    }
  }

  :deep(.amount-info) {
    .uni-list-item__extra-text {
      color: $amount-color;
      font-size: 32rpx;
    }
  }
}

.statusbar {
  background: $theme-background;
}

.header {
  background: $theme-background;
  display: flex;
  padding: 40rpx 30rpx 60rpx;
}

.title-view {
  flex: 1;
  text-align: center;
  color: #fff;

  .status {
    margin-bottom: 30rpx;
    font-size: 40rpx;
  }

  .time {
    font-size: 28rpx;
  }
}

.address-view {
  margin-top: 20rpx;

  .item-view {
    color: #999;
    font-size: 28rpx;
  }
}

.order-list-view {
  margin-top: 20rpx;
}

.amount-info {
  margin-top: 20rpx;
}

.payment-list {
  margin-top: 20rpx;

  :deep(.uni-list-item__container) {
    padding-top: 0;
    padding-bottom: 0;
  }

  .radio-item {
    width: 100%;
    display: flex;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.submit-view {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9;
  width: calc(100% - 60rpx);
  height: $footer-height;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 30rpx;

  .amount {
    display: flex;
    font-size: 28rpx;
    color: $text-color;
    margin-right: 30rpx;

    .order-amount {
      text {
        &:first-child {
          font-size: 24rpx;
          color: $amount-color;
        }

        &:last-child {
          font-size: 40rpx;
          color: $amount-color;
        }
      }
    }
  }

  .button-view {
    button {
      margin: 0;
      padding: 0;
      border: none;
      font-size: 28rpx;
      color: #fff;
      font-weight: bold;
      background: linear-gradient(to right, #ff6034, #ee0a24);;
      border-radius: 999px;
      width: 220rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      &::after {
        display: none;
      }
    }
  }
}
</style>
